<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>系统操作日志</title>
    <link href="../../static/component/pear/css/pear.css" rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">操作模块</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="title" placeholder="操作模块" class="layui-input">
                </div>
                <label class="layui-form-label">操作人员</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="operName" placeholder="操作人员" class="layui-input">
                </div>
                <label class="layui-form-label">登录类型</label>
                <div class="layui-input-inline">
                    <select name="businessType">
                        <option value="">请选择</option>
                        <option value="1">新增</option>
                        <option value="2">修改</option>
                        <option value="3">删除</option>
                        <option value="4">授权</option>
                        <option value="5">强退</option>
                        <option value="0">其他</option>
                    </select>
                </div>
				<label class="layui-form-label">登录状态</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="status">
						<option value="">所有</option>
						<option value="0">成功</option>
						<option value="1">失败</option>
					</select>
				</div>
                <label class="layui-form-label">操作时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_time" id="date" placeholder="开始时间" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" name="end_time" id="date1" placeholder="结束时间" autocomplete="off"
                           class="layui-input">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="logininfor-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="logininfor-table" lay-filter="logininfor-table"></table>
    </div>
</div>
<!--0其他蓝色1新增是绿色2修改是绿色3删除是红色4授权是暖色5强退是红色-->
<script type="text/html" id="logininfor-businessType">
    {{#if (d.businessType == 0) { }}
    <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">其他</button>
    {{# }else if(d.businessType == 1){ }}
    <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-green">新增</button>
    {{# }else if(d.businessType == 2){ }}
    <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-green">修改</button>
    {{# }else if(d.businessType == 3){ }}
    <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">删除</button>
    {{# }else if(d.businessType == 4){ }}
    <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm">授权</button>
    {{# }else if(d.businessType == 5){ }}
    <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm">强退</button>
    {{# } }}
</script>
<script type="text/html" id="logininfor-status">
    {{#if (d.status == 0) { }}
    <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-green">成功</button>
    {{# }else if(d.status == 1){ }}
    <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">失败</button>
    {{# } }}
</script>

<script type="text/html" id="logininfor-createTime">
    {{layui.util.toDateString(d.create_time, 'yyyy-MM-dd HH:mm:ss')}}
</script>

<div style="display: none;">
    <div class="layer-top">
        <br/>
        <h3>上侧弹层内容...</h3>
    </div>
</div>

<script src="../../static/component/layui/layui.js" th:src="@{/static/component/layui/layui.js}"></script>
<script src="../../static/component/pear/pear.js" th:src="@{/static/component/pear/pear.js}"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown', 'laydate'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let drawer = layui.drawer;
        let dropdown = layui.dropdown;
        let laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        let cols = [
            [
                {
                    title: '访问编号',
                    field: 'operId',
                    align: 'center',
                    width: 100
                },
                {
                    title: '系统模块',
                    field: 'title',
                    align: 'center'
                },
                {
                    title: '操作类型',
                    field: 'businessType',
                    align: 'center',
                    width: 100,
                    templet: '#logininfor-businessType'
                },
                {
                    title: '操作人员',
                    field: 'operName',
                    align: 'center',
                    width: 100
                },
                {
                    title: '主机',
                    field: 'operIp',
                    align: 'center',
                    width: 100
                },
                {
                    title: '操作地点',
                    field: 'operLocation',
                    align: 'center'
                },

                {
                    title: '操作状态',
                    field: 'status',
                    align: 'center',
                    width: 100,
                    templet: '#logininfor-status'
                },
                {
                    title: '操作时间',
                    field: 'create_time',
                    align: 'center',
                    width: 200,
                    templet: '#logininfor-createTime'
                }
            ]
        ]

        table.render({
            elem: '#logininfor-table',
            url: '/system/openlog/openlogquery',
            method: 'post',
            page: true,
            limits: [5, 10, 15, 20],
            limit: 5, //每页默认显示的数量
            cols: cols,
            skin: 'line',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "data": res.data.records, //解析数据列表
                    "count": res.data.total
                }
            }
        });

        form.on('submit(logininfor-query)', function (data) {
            table.reload('logininfor-table', {
                where: data.field
            })
            return false;
        });
    })
</script>
</body>
</html>
